<template>
  <div class="main-content">
    <div style="height: 120px;background-color: #E9EEF3; padding-top: 30px;">
      <input type="text" style="width: 600px; height: 40px; border-radius: 10px; border-color: aquamarine;font-size: 18px;">
      <button style="width: 80px; height: 40px; border-radius: 10px;margin-left: 10px;border-color: aquamarine;color: aquamarine; font-weight: bold;font-size: 18px;">搜索</button>
    </div>

    <div style="display: flex;">
      <div class="homeleft"></div>

      <div style="width: 68%; height: auto; background-color: rgba(233,238,243); border-radius: 25px">
        <div style="color: aquamarine; text-align: left; margin: 15px 15px; font-size: 18px; font-weight: bold;">树苗市场</div>
        <div style="display: flex; margin: 0 25px;">
          <div style="flex: 2; height: 80vh;">
            <div style="height: 50px;">
              <div style="text-align: left; font-size: 18px; font-weight: bolder;margin-left: 10px;">树苗分类</div>
            </div>
            <div style="display: flex; margin: 14px 0;" v-for="item in typeData">
                <div id="treetypename" @click=totreeselect(item)>{{ item.treetypename }}</div>
            </div>
          </div>

          <div style="flex: 5; height: 80vh;">
            <div>
              <el-carousel height="400px" style="border-radius: 15px;">
                <el-carousel-item v-for="item in carousel_top" >
                  <img :src="item" alt="" style="width: 100%; height: 400px; background-size: contain;">
                </el-carousel-item>
              </el-carousel>
            </div>

            <div style="margin-top: 30px; display: flex;">
              <div style="flex: 1;margin-right: 2px;">
                <el-carousel height="200px" style="border-radius: 15px;">
                  <el-carousel-item v-for="item in carousel_bottom_left" >
                    <img :src="item" alt="" style="width: 100%; height: 200px; background-size: contain;">
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div style="flex: 1;margin-left: 2px;">
                <el-carousel height="200px" style="border-radius: 15px;">
                  <el-carousel-item v-for="item in carousel_bottom_right" >
                    <img :src="item" alt="" style="width: 100%; height: 200px; background-size: contain;">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>

          <div style="flex: 3; height: 80vh; margin-left: 10px;">
            <div style="text-align: center; margin-bottom: 5px; height: 25%; border-radius: 10px; background-color: rgba(231,231,231,0.5);">

              <el-image
                  style="width: 80px; height: 80px;border-radius: 50%;margin-top: 30px;"
                  :src="'http://localhost:8081/api/files/' + user.img"
                  :preview-src-list="['http://localhost:8081/api/files/' + user.img]">
              </el-image>

              <div style="margin-top: 15px;">
                <span>你好,用户 &nbsp</span>{{ user.username }}</div>
            </div>
            <div style="height: 230px; background-color: rgba(231,231,231,0.5); border-radius: 10px; margin-bottom: 5px;">
              <div style="font-size: 16px; font-weight: bold; padding: 15px 15px;">
                <span style="margin-left: 10px;">公告栏</span>
                <a style="float: right;" href="/usernotice">更多</a>
              </div>
              <div v-for="item in noticeData">
                <div style="width: 330px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"> {{ item.notice }} </div>
              </div>
            </div>
            <div style="height: 220px; background-color: rgba(231,231,231,0.5); border-radius: 10px; margin-bottom: 5px;">
              <div style="width: 100%; height: 25%;" ></div>
              <div style="width: 100%; height: 80%;">
                <div style="height: 30%; display: flex;">
                  <i class="el-icon-star-off" id="usericon" @click="usercollect"></i>
                  <i class="el-icon-user" id="usericon" @click="userinfo"></i>
                  <i class="el-icon-service" id="usericon" @click="userservice"></i>
                  <i class="el-icon-s-order" id="usericon" @click="userorder"></i>
                </div>
                <div style="height: 40%;display: flex; margin-top: 5px;">
                  <span style="width: 25%;height: 100%;" @click="usercollect">我的收藏</span>
                  <span style="width: 25%;height: 100%;" @click="userinfo">个人信息</span>
                  <span style="width: 25%;height: 100%;" @cilck="userservice">售后服务</span>
                  <span style="width: 25%;height: 100%;" @click="userorder">我的订单</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="color: aquamarine;  text-align: left; margin: 0px 15px; font-size: 18px; font-weight: bold;">树苗推荐</div>
        <div>
          <el-row>
            <el-col :span="5" v-for="item in treeData">
              <img class="treeimg" src="../../assets/imageBox/businessImg/风景树.webp" alt="" @click="detail('/detailview?treeId=' + item.treeId)">
              <div class="treename">{{ item.treename }}</div>
              <div style="margin-top: 10px; color: burlywood; font-size: 16px; font-weight: bold;">￥: {{ item.treeprice }}元 / 棵</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="homeright"></div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {queryTree} from "@/api/tree";
import treeSelect from "@/views/user/TreeSelect.vue";
export default {
  data() {
    return {
      user:sessionStorage.getItem("user")? JSON.parse(sessionStorage.getItem("user")):{},
      typeData:[],
      treeData:[],
      noticeData:[],
      carousel_top:[
        require('../../assets/imageBox/businessImg/风景树.webp'),
        require('../../assets/imageBox/businessImg/风景树2.webp'),
        require('../../assets/imageBox/businessImg/AppleTree.jpeg'),
        require('@/assets/imageBox/businessImg/银杏树苗.webp')
      ],
      carousel_bottom_left: [
          require('../../assets/imageBox/businessImg/preview.jpg'),
          require('../../assets/imageBox/businessImg/AppleTree.jpeg'),
          require('@/assets/imageBox/businessImg/银杏树苗.webp')
      ],
      carousel_bottom_right:[
          require('../../assets/imageBox/businessImg/风景树.webp'),
          require('../../assets/imageBox/businessImg/风景树2.webp'),
          require('../../assets/imageBox/businessImg/AppleTree.jpeg')
      ],
    }
  },
  created() {
    this.loadType();
    this.findByNotice();
    this.loadTree();
  },
  methods:{
    loadType() {
      request.post("/treename/typename").then(res => {
        if (res.code ==='0'){
          this.typeData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    totreeselect(obj){
      localStorage.setItem("typename",obj.treetypename);
      this.$router.push("/treeselect");
    },
    findByNotice() {
      request.post("/notice/findByNotice").then(res => {
        if (res.code === '0'){
          this.noticeData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    loadTree() {
      request.get("/tree/findtreeinfo").then(res => {
        if (res.code === '0') {
          this.treeData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    more() {
      this.$router.push('/notice')
    },
    detail(url){
      location.href = url;
    },
    userinfo(){
      this.$router.push("/selfinfoview")
    },
    usercollect(){
      this.$router.push("/selfcollectview")
    },
    userorder(){
      this.$router.push("/selforder")
    },
    userservice(){
      this.$router.push("/shopperservice")
    },
  }
}

</script>

<style>

* {
  main.el-main {
  }
}

.main-content {
  width: 100%;
  margin: 0 auto;
}

.homeleft {
  width: 16%;
  height: 100vh;
  background: linear-gradient(#E9EEF3, aquamarine, #E9EEF3);

}
#treetypename {
  margin-left: 10px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

#treetypename:hover {
  cursor: pointer;
  transform: scale(1.005);
  transition: 0.5s;
}

.homeright {
  width: 16%;
  height: 100vh;
  background: linear-gradient(#E9EEF3, aquamarine, #E9EEF3);

}
#usericon {
  width: 25%;
  height: 100%;
  font-size: 30px;
  font-weight: bold;
  margin-top: 20px;
}
#usericon:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: 0.5s;
}

.el-col-5 {
  width: 20%;
  max-width: 20%;
  padding: 10px 10px;
}

.treeimg {
  width: 100%;
  height: 175px;
  border-radius: 10px;
  border: #cccccc 1px solid;
}

.treeimg:hover {
  cursor: pointer;
}

.treename {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
  color: rgb(0,0,0);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>
